
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-card_pre"></i>
                    <div class="name">card_pre</div>
                    <div class="fontclass">.icon-card_pre</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building"></i>
                    <div class="name">building</div>
                    <div class="fontclass">.icon-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building_pre"></i>
                    <div class="name">building_pre</div>
                    <div class="fontclass">.icon-building_pre</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customer"></i>
                    <div class="name">customer</div>
                    <div class="fontclass">.icon-customer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card"></i>
                    <div class="name">card</div>
                    <div class="fontclass">.icon-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customer_pre"></i>
                    <div class="name">customer_pre</div>
                    <div class="fontclass">.icon-customer_pre</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-data"></i>
                    <div class="name">data</div>
                    <div class="fontclass">.icon-data</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-data_pre"></i>
                    <div class="name">data_pre</div>
                    <div class="fontclass">.icon-data_pre</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-found_pre"></i>
                    <div class="name">found_pre</div>
                    <div class="fontclass">.icon-found_pre</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-found"></i>
                    <div class="name">found</div>
                    <div class="fontclass">.icon-found</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow"></i>
                    <div class="name">arrow</div>
                    <div class="fontclass">.icon-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_list_share"></i>
                    <div class="name">Building_list_share</div>
                    <div class="fontclass">.icon-Building_list_share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_details_col"></i>
                    <div class="name">Building_details_col</div>
                    <div class="fontclass">.icon-Building_details_col</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_details_col1"></i>
                    <div class="name">Building_details_col</div>
                    <div class="fontclass">.icon-Building_details_col1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_list_drop_n"></i>
                    <div class="name">Building_list_drop_n</div>
                    <div class="fontclass">.icon-Building_list_drop_n</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_details_pan"></i>
                    <div class="name">Building_details_pan</div>
                    <div class="fontclass">.icon-Building_details_pan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_details_pro"></i>
                    <div class="name">Building_details_pro</div>
                    <div class="fontclass">.icon-Building_details_pro</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_list_Map"></i>
                    <div class="name">Building_list_Map</div>
                    <div class="fontclass">.icon-Building_list_Map</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_list_drop_s"></i>
                    <div class="name">Building_list_drop_s</div>
                    <div class="fontclass">.icon-Building_list_drop_s</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_list_search"></i>
                    <div class="name">Building_list_search</div>
                    <div class="fontclass">.icon-Building_list_search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_building"></i>
                    <div class="name">chat_building</div>
                    <div class="fontclass">.icon-chat_building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_camera"></i>
                    <div class="name">chat_camera</div>
                    <div class="fontclass">.icon-chat_camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_expression"></i>
                    <div class="name">chat_expression</div>
                    <div class="fontclass">.icon-chat_expression</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_phrase"></i>
                    <div class="name">chat_phrase</div>
                    <div class="fontclass">.icon-chat_phrase</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_location"></i>
                    <div class="name">chat_location</div>
                    <div class="fontclass">.icon-chat_location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_keyboard"></i>
                    <div class="name">chat_keyboard</div>
                    <div class="fontclass">.icon-chat_keyboard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_more"></i>
                    <div class="name">chat_more</div>
                    <div class="fontclass">.icon-chat_more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_phone"></i>
                    <div class="name">chat_phone</div>
                    <div class="fontclass">.icon-chat_phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_picture"></i>
                    <div class="name">chat_picture</div>
                    <div class="fontclass">.icon-chat_picture</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_Reported"></i>
                    <div class="name">chat_Reported</div>
                    <div class="fontclass">.icon-chat_Reported</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_list_screen"></i>
                    <div class="name">Building_list_screen</div>
                    <div class="fontclass">.icon-Building_list_screen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_register_rb_n"></i>
                    <div class="name">chat_register_rb_n</div>
                    <div class="fontclass">.icon-chat_register_rb_n</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_Shutdown"></i>
                    <div class="name">chat_Shut down</div>
                    <div class="fontclass">.icon-chat_Shutdown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_warning"></i>
                    <div class="name">chat_warning</div>
                    <div class="fontclass">.icon-chat_warning</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_voice"></i>
                    <div class="name">chat_voice</div>
                    <div class="fontclass">.icon-chat_voice</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-commission"></i>
                    <div class="name">commission</div>
                    <div class="fontclass">.icon-commission</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Focuson_chat"></i>
                    <div class="name">Focus on_chat</div>
                    <div class="fontclass">.icon-Focuson_chat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Focuson_"></i>
                    <div class="name">Focus on_+</div>
                    <div class="fontclass">.icon-Focuson_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_register_Check"></i>
                    <div class="name">chat_register_Check</div>
                    <div class="fontclass">.icon-chat_register_Check</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Building_details_for"></i>
                    <div class="name">Building_details_for</div>
                    <div class="fontclass">.icon-Building_details_for</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_register_rb_s"></i>
                    <div class="name">chat_register_rb_s</div>
                    <div class="fontclass">.icon-chat_register_rb_s</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Systemmessage"></i>
                    <div class="name">System message</div>
                    <div class="fontclass">.icon-Systemmessage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_bank"></i>
                    <div class="name">map_bank</div>
                    <div class="fontclass">.icon-map_bank</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_bus"></i>
                    <div class="name">map_bus</div>
                    <div class="fontclass">.icon-map_bus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_education"></i>
                    <div class="name">map_education</div>
                    <div class="fontclass">.icon-map_education</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_hospital"></i>
                    <div class="name">map_hospital</div>
                    <div class="fontclass">.icon-map_hospital</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_leisure"></i>
                    <div class="name">map_leisure</div>
                    <div class="fontclass">.icon-map_leisure</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_fitness"></i>
                    <div class="name">map_fitness</div>
                    <div class="fontclass">.icon-map_fitness</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_subway"></i>
                    <div class="name">map_subway</div>
                    <div class="fontclass">.icon-map_subway</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_shopping"></i>
                    <div class="name">map_shopping</div>
                    <div class="fontclass">.icon-map_shopping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_food"></i>
                    <div class="name">map_food</div>
                    <div class="fontclass">.icon-map_food</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_navigation"></i>
                    <div class="name">map_navigation</div>
                    <div class="fontclass">.icon-map_navigation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_bank_"></i>
                    <div class="name">map_bank_2</div>
                    <div class="fontclass">.icon-map_bank_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_education_"></i>
                    <div class="name">map_education_2</div>
                    <div class="fontclass">.icon-map_education_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_fitness_"></i>
                    <div class="name">map_fitness_2</div>
                    <div class="fontclass">.icon-map_fitness_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_food_"></i>
                    <div class="name">map_food_2</div>
                    <div class="fontclass">.icon-map_food_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_hospital_"></i>
                    <div class="name">map_hospital_2</div>
                    <div class="fontclass">.icon-map_hospital_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_subway_"></i>
                    <div class="name">map_subway_2</div>
                    <div class="fontclass">.icon-map_subway_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_leisure_"></i>
                    <div class="name">map_leisure_2</div>
                    <div class="fontclass">.icon-map_leisure_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_shopping_"></i>
                    <div class="name">map_shopping_2</div>
                    <div class="fontclass">.icon-map_shopping_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map_bus_"></i>
                    <div class="name">map_bus_2</div>
                    <div class="fontclass">.icon-map_bus_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customerdetails_inf"></i>
                    <div class="name">customer details_inf</div>
                    <div class="fontclass">.icon-customerdetails_inf</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customerdetails_Mod"></i>
                    <div class="name">customer details_Mod</div>
                    <div class="fontclass">.icon-customerdetails_Mod</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Clientlist_focused"></i>
                    <div class="name">Client list_focused</div>
                    <div class="fontclass">.icon-Clientlist_focused</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Clientlist_screenin"></i>
                    <div class="name">Client list_screenin</div>
                    <div class="fontclass">.icon-Clientlist_screenin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-customerdetails_Rep"></i>
                    <div class="name">customer details_Rep</div>
                    <div class="fontclass">.icon-customerdetails_Rep</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-delete"></i>
                    <div class="name">delete</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search_empty"></i>
                    <div class="name">search_empty</div>
                    <div class="fontclass">.icon-search_empty</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-article_collection"></i>
                    <div class="name">article_collection</div>
                    <div class="fontclass">.icon-article_collection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-article_program"></i>
                    <div class="name">article_program</div>
                    <div class="fontclass">.icon-article_program</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-article_share"></i>
                    <div class="name">article_share</div>
                    <div class="fontclass">.icon-article_share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building_details_rec"></i>
                    <div class="name">building_details_rec</div>
                    <div class="fontclass">.icon-building_details_rec</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building_details_rec1"></i>
                    <div class="name">building_details_rec</div>
                    <div class="fontclass">.icon-building_details_rec1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building_details_sho"></i>
                    <div class="name">building_details_sho</div>
                    <div class="fontclass">.icon-building_details_sho</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building_details_sho1"></i>
                    <div class="name">building_details_sho</div>
                    <div class="fontclass">.icon-building_details_sho1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building_details_top"></i>
                    <div class="name">building_details_top</div>
                    <div class="fontclass">.icon-building_details_top</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feedback_camera"></i>
                    <div class="name">feedback_camera</div>
                    <div class="fontclass">.icon-feedback_camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_collection"></i>
                    <div class="name">me_collection</div>
                    <div class="fontclass">.icon-me_collection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_coupons"></i>
                    <div class="name">me_coupons</div>
                    <div class="fontclass">.icon-me_coupons</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_editor"></i>
                    <div class="name">me_editor</div>
                    <div class="fontclass">.icon-me_editor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-coupons_used"></i>
                    <div class="name">coupons_used</div>
                    <div class="fontclass">.icon-coupons_used</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_Customer"></i>
                    <div class="name">me_Customer</div>
                    <div class="fontclass">.icon-me_Customer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_building"></i>
                    <div class="name">me_building</div>
                    <div class="fontclass">.icon-me_building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_gift"></i>
                    <div class="name">me_gift</div>
                    <div class="fontclass">.icon-me_gift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_history"></i>
                    <div class="name">me_history</div>
                    <div class="fontclass">.icon-me_history</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_members"></i>
                    <div class="name">me_members</div>
                    <div class="fontclass">.icon-me_members</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_night"></i>
                    <div class="name">me_night</div>
                    <div class="fontclass">.icon-me_night</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_order"></i>
                    <div class="name">me_order</div>
                    <div class="fontclass">.icon-me_order</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_opinion"></i>
                    <div class="name">me_opinion</div>
                    <div class="fontclass">.icon-me_opinion</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_package"></i>
                    <div class="name">me_package</div>
                    <div class="fontclass">.icon-me_package</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_Qrcode"></i>
                    <div class="name">me_Qr code</div>
                    <div class="fontclass">.icon-me_Qrcode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-me_Reported"></i>
                    <div class="name">me_Reported</div>
                    <div class="fontclass">.icon-me_Reported</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package_building"></i>
                    <div class="name">package_building</div>
                    <div class="fontclass">.icon-package_building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package_Blabels"></i>
                    <div class="name">package_B labels</div>
                    <div class="fontclass">.icon-package_Blabels</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package_Customer"></i>
                    <div class="name">package_Customer</div>
                    <div class="fontclass">.icon-package_Customer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-coupons_expired"></i>
                    <div class="name">coupons_expired</div>
                    <div class="fontclass">.icon-coupons_expired</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package_gift"></i>
                    <div class="name">package_gift</div>
                    <div class="fontclass">.icon-package_gift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package_Optimal"></i>
                    <div class="name">package_Optimal</div>
                    <div class="fontclass">.icon-package_Optimal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-package_honorable"></i>
                    <div class="name">package_honorable</div>
                    <div class="fontclass">.icon-package_honorable</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-empty_building"></i>
                    <div class="name">empty_building</div>
                    <div class="fontclass">.icon-empty_building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-empty_dynamic"></i>
                    <div class="name">empty_dynamic</div>
                    <div class="fontclass">.icon-empty_dynamic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-empty_article"></i>
                    <div class="name">empty_article</div>
                    <div class="fontclass">.icon-empty_article</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-empty_Reported"></i>
                    <div class="name">empty_Reported</div>
                    <div class="fontclass">.icon-empty_Reported</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_Voiceright"></i>
                    <div class="name">chat_Voice right</div>
                    <div class="fontclass">.icon-chat_Voiceright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat_Voiceleft"></i>
                    <div class="name">chat_Voice left</div>
                    <div class="fontclass">.icon-chat_Voiceleft</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
